<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="https://at.alicdn.com/t/c/font_4624745_5q9umqk3hzk.css">
    <style>
        .box{
            width: 900px;
            height: 800px;
            border: 2px solid red;
            margin: 40px auto;
            position: relative;
        }
        h3{
            padding: 20px 20px 10px;
            border-bottom: 1px dashed #ccc;
        }
        .iconfont{
            font-size: 25px;
        }
        .fang{
           padding: 10px 20px;
           border:1px solid #ccc;
           margin:5px;
           width: 150px;
           text-align: center;
        
           
        }
        .active{
            color: red;
        }
        .a1{
            color: red;
            font-size: 18px;
        }
        textarea{
            width:800px;
            height:300px;
            margin: 0 35px;
        }
        .active1{
            border:1px solid red;
            background-image: url(./img/对号.png);
            background-repeat: no-repeat;
            background-position: 160px 10px;
        }
        .finish{
            background-color: rgb(228, 91, 91);
            padding: 10px 30px;
            border: none;
            border-radius: 10px;
            margin-left: 750px;
            margin-top: 20px;
        }
    </style>
</head>
<body>
    <div id="app">
    <div class="box">
      <h3>给“新闻订单”的评价</h3>
      <div>
        <span>请严肃认真对待此次评价哦！您的评价对我们真的真的非常重要！</span>
        <p>
            <i class="iconfont icon-xiaoxingxing" @mouseover="variation(1)" @click="variation(1)" :class="{'active':a>=1}"></i>
            <i class="iconfont icon-xiaoxingxing" @mouseover="variation(2)" @click="variation(2)" :class="{'active':a>=2}"></i>
            <i class="iconfont icon-xiaoxingxing" @mouseover="variation(3)" @click="variation(3)" :class="{'active':a>=3}"></i>
            <i class="iconfont icon-xiaoxingxing" @mouseover="variation(4)" @click="variation(4)" :class="{'active':a>=4}"></i>
            <i class="iconfont icon-xiaoxingxing" @mouseover="variation(5)" @click="variation(5)" :class="{'active':a>=5}"></i>
            <span class="a1">{{grade1}}</span>
        </p>
      </div>
      <div style="padding:5px 10px 5px;;background-color: #ccc;">
        <p >本次交易，乖，摸摸头 给你留下了什么印象呢？</p>
      </div>
      <div style="display:flex;margin:10px; flex-wrap: wrap;">
        <div class="fang" @click="appear=1" :class="{'active1':appear===1}">专业水平高</div>
        <div class="fang" @click="appear=2" :class="{'active1':appear===2}">交付准时</div>
        <div class="fang" @click="appear=3" :class="{'active1':appear===3}">效果明显</div>
        <div class="fang" @click="appear=4" :class="{'active1':appear===4}">数据分析准确</div>
        <div class="fang" @click="appear=5" :class="{'active1':appear===5}">能力待提高</div>
        <div class="fang" @click="appear=6" :class="{'active1':appear===6}">工期延误</div>
      </div>
      <div>
        <textarea name="" id="" v-model="count" @input="much">
        </textarea>
        <p v-if="count.length<= total" style="position: absolute; top: 600px; right:70px;">还可以输入{{rest}}字</p>
      </div>
        <button class="finish" @click="show=!show" >评价完成</button>
        <div style="width: 220px;height: 50px;background-color: rgb(94, 90, 90); color: white;text-align: center;line-height: 50px; position: absolute;top:500px ;left:400PX" v-if="show">
          感谢你的评价！么么哒！
        </div>
    </div>
    </div>    
</body>
<script src="./vue.js"></script>
<script>
    const{createApp,ref, reactive,computed}=Vue;
    createApp({
        setup(){
            let a=ref(0);
            let grade=['较差','差评','中等','一般','好评']
            function variation(e){
               a.value=e  
            }
            let grade1=computed(function(){
                return grade[a.value-1]||''
            })
            let appear=ref(0)
            let count=ref('')
            let total=140;
            let rest=ref(total-count.value.length);
            function much(){
                count.value=count.value.slice(0,total)
                rest.value=total-count.value.length;
            }
            let show=ref(false)

         return{
              a,
              variation,
              grade,
              grade1,
              appear,
              count,
              rest,
              much,
              total,
              show
            }
        }
    }).mount("#app")
</script>
</html>